<template>
<div class="h-full  p-2 bg-yellow-50">


  <table class="table">
    <!-- head -->
    <thead>
    <tr>
      <th class="w-14">
        <label>
          <input type="checkbox" class="checkbox"/>
        </label>
      </th>
      <th>Name</th>
      <th>Rate of progress</th>
      <th class="w-32">Status</th>
      <th></th>
    </tr>
    </thead>
    <tbody>

    <!-- row 1 -->
    <tr v-for="item in taskStore.getReceiveList">
      <th>
        <label>
          <input type="checkbox" class="checkbox"/>
        </label>
      </th>
      <td>
        <div class="flex items-center gap-3">
          <div>
            <div class="font-bold">{{ item.fileName }}</div>
            <div class="text-sm opacity-50 flex gap-4">
              <span>{{ item.startTime.toLocaleString() }}</span>
              <span>{{formatSize(item.fileSize)}} </span>
            </div>
          </div>
        </div>
      </td>
      <td>
        <progress class="progress w-56" :class="item.processValue<100?'progress-secondary':''"
                  :value="item.processValue" max="100"></progress>
        <br/>
        <span class="badge badge-ghost badge-sm">{{ item.processValue }}%</span>
      </td>
      <td>{{ formatStatus(item.status) }}</td>
      <th>
        <button v-if="item.status=='SUSPEND'" class="btn btn-ghost btn-sm">开始</button>
        <button v-if="item.status=='RUNNING'" class="btn btn-ghost btn-sm">暂停</button>
        <button class="btn btn-ghost btn-sm">x</button>
      </th>
    </tr>
    <!-- row 2 -->

    </tbody>
    <!-- foot -->
    <tfoot>

    </tfoot>
  </table>

</div>
</template>

<script setup lang="ts">
import {useTaskStore} from "@/stores/task.ts";
import {formatSize,formatStatus} from "@/utils/my_function.js";

const taskStore = useTaskStore();




</script>

<style scoped>

</style>